<template>
  <div class="zhu">
    <div class="lianxi">
      <br />
      <br />
      <h3>限时秒杀</h3>
    </div>
    <div class="neirong">
      <div class="swiper-container">
        <div class="swiper-wrapper">
          <div class="swiper-slide" v-for="item in bookList" :key="item.bookId">
            <el-image
              style="width: 140px; height: 160px; margin-top:-40px"
              :src="'https://images.weserv.nl/?url=' + item.img"
              fit="fill"
            ></el-image>
            <p>{{ item.title }}</p>
            <h5>￥{{item.price}}</h5>
          </div>

          <!-- <div class="swiper-slide">
							<p>oxygenics持花洒
							</p><img src="#">
						</div>
						<div class="swiper-slide">
							<p>四季沐歌智能恒温花洒
							</p><img src="#">
						</div>
						<div class="swiper-slide">
							<p>四季沐歌增压出...
							</p><img src="#">
						</div>
						<div class="swiper-slide">
							<p>箭牌淋浴花酒套装
							</p><img src="#">
						</div>
						<div class="swiper-slide">
							<p>法恩莎节水型花洒
							</p><img src="#">
						</div>
						<div class="swiper-slide">
							<p>盛大正撒花洒</p><img src="#">
						</div>
						<div class="swiper-slide">
							<p>四季沐歌增压</p><img src="#">
						</div> -->
        </div>
        <div class="swiper-button-next"></div>
        <div class="swiper-button-prev"></div>
      </div>
    </div>
  </div>
</template>

<script language="JavaScript">
import axios from "axios";
import Swiper from "swiper";

// import 'swiper/dist/js/swiper.min.js'
export default {
  data() {
    return {
      bookList: [],
    };
  },
  methods: {
    //初始化swiper组件
    _initSwiper() {},

    getbook() {
      axios
        .get("http://localhost:8081/fl-book/getCategoriesBooks", {
          params: {
            categoriesId: 1,
          },
        })
        .then((res) => {
          console.log(res.data.msg);
          console.log("sdds");
          this.bookList = res.data.data;
        });
    },
  },
  created() {
    this.getbook();
  },
  mounted() {
    var mySwiper = new Swiper(".swiper-container", {
      slidesPerView: 5,
      spaceBetween: 30,
      observer: true,   //自动初始化组件

      pagination: {
        el: ".swiper-pagination",
        clickable: true,
      },
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
      },
      autoplay: {
        autoplay: true,
        disableOnInteraction: false,
      },
    });
  },
};
</script>

<style>
@import "";
.zhu {
  display: flex;
}
ul {
  list-style: none;
}
li {
  float: left;
}
.lianxi {
  text-align: center;
  background: #d3dce6;
  width: 140px;
  height: 250px;
  line-height: 20px;

  flex: 1;
}

.neirong {
  background: #F6F6F6;
  flex: 5;
}
.swiper-container {
  width: 1000px;
  height: 230px;
  margin-top:10px
}

.swiper-slide {
  margin-top: -10px;
  position: relative;
  width: 180px;
  /* text-align: center; */
  font-size: 10px;
  background: #fff;
 
  height: 150px;

  /* Center slide text vertically */
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}
.swiper-slide:hover{
   border: 0px #d9d9d9 solid;
    box-shadow: 0px 0px 6px #9a9a9a;
}

.swiper-container {
  --swiper-theme-color: #ff6600; /* 设置Swiper风格 */
  --swiper-navigation-color: hsl(216, 100%, 50%); /* 单独设置按钮颜色 */
  --swiper-navigation-size: 30px;
}
.swiper-container .swiper-wrapper div p {
  position: absolute;
  font-size: 13px;
  text-decoration: none;
  color: #333333;
  margin-top: 70px;
}
.swiper-container .swiper-wrapper div h5{
  position: absolute;
  margin-top: 90px;
}
</style>
